@charset "utf-8";

@function r($px){
    @return ($px/40)*1rem;
    
    
}

@function px($px){
    @return ($px/2) * 1px;
}

header{
    width: 100%;
    height:px(150);
.back input {
    width:r(123);
    height: px(57);
    font-size: r(26);
    margin-left: 23px;
    margin-top: 25px;
    border-radius: 17px;
    background: white;
    border: 2px solid #ff9344;
    /*margin-bottom: 18px;*/
}

.discover {
    font-size: 26px;
    margin-left: 55px;
    margin-top: 21px;
}

}

.nav {
    width: r(750);
    height: px(217);

   
   img {
    width: 100%;
    margin-bottom: r(9);
}

div {
    width: r(115);
    height: px(217);
    font-size: r(30);
    overflow: hidden;
    text-align: center;
}

.foods {  
    margin-left: r(27);
}

.movie,.sport,.sing {
    margin-left: r(34);
}

}


/*美食类*/
.delicious {
     width: r(750);
    height: px(100);
    //margin-bottom: 52px;
    
    
  .deli-foods {
     width: r(195);
    height: px(80); 
     vertical-align: middle;
    margin-left: 30px;
    margin-bottom: 10px;
}

 .deli-foods img{
     width: r(56);
    height: px(50); 
    vertical-align: middle;
    }
    
 .deli-foods a {
    font-size: r(30);
      color: black;
    }
    
    .more {
    vertical-align: middle;
     width: r(180);
    height: px(50); 
    //margin-right: 21px;
    //margin-top: 10px;
    img{
     width: r(55);
    height: px(50); 
    vertical-align: middle;
    }
}  

  .more a {
    font-size:r(24);
      color: black;
}

.delicious-photos img{
    width:r(137) ;
    width: px(133);
}
.delicious-photos img:nth-of-type(1) {
    margin-left: r(22);
}

.delicious-photos img:nth-of-type(2),.delicious-photos img:nth-of-type(3),.delicious-photos img:nth-of-type(4) {
    margin-left:r(15);
}


}



/*运动类*/
.sports {
    width: r(750);
    height: px(100);
    margin-top: 80px;
    
    .sports-class {
        width: r(195);
        height: px(80); 
        vertical-align: middle;
        margin-left: 30px;
        margin-bottom: 10px;
}

 .sports-class img{
     width: r(56);
    height: px(50); 
    vertical-align: middle;
    }

.sports-class a {
    font-size: r(30);
      color: black;
}

.more {
    vertical-align: middle;
     width: r(180);
    height: px(50); 
    
    img{
     width: r(55);
    height: px(50); 
    vertical-align: middle;
    }
}  

.more a {
    font-size: r(24);
      color: black;
    padding-bottom: 10px;
}

.sports-photos img{
    width:r(137) ;
    width: px(133);
}
.sports-photos img:nth-of-type(1) {
    margin-left: r(22);
}

.sports-photos img:nth-of-type(2),.sports-photos img:nth-of-type(3),.sports-photos img:nth-of-type(4) {
   margin-left:r(15);
}


}

/*电影类和唱歌类*/
.movies {
     width: r(750);
    height: px(100);
    margin-top: 80px;
    
    .movies-class {
        width: r(195);
        height: px(80); 
        vertical-align: middle;
        margin-left: 30px;
        margin-bottom: 10px;
}

.movies-class img{
     width: r(56);
    height: px(50); 
    margin-top: 10px;
    vertical-align: middle;
    }
    
   .movies-class a {
         color: black;
    font-size: r(30);
    line-height: 55px;
    margin-left: 19px;
} 
.more {
    vertical-align: middle;
     width: r(180);
    height: px(50); 
    margin-top: 10px;
    
    img{
     width: r(55);
    height: px(50); 
    vertical-align: middle;
    }
    

}

.more a {
      color: black;
    margin-top: 7px;
    font-size: r(24);
}
.movies-photos img{
    width:r(137) ;
    width: px(133);
}
 .movies-photos img:nth-of-type(1) {
    margin-left: r(22);
}
.movies-photos img:nth-of-type(2),.movies-photos img:nth-of-type(3),.movies-photos img:nth-of-type(4) {
    margin-left: r(15);
}

}


@media screen and (min-width:750px){ 
 .nav {
    width: 750px;
    height: 217px;

   
   img {
    width: 100%;
    margin-bottom: 9px;
}

div {
    width: 115px;
    height: 217px;
    font-size: 30px;
    overflow: hidden;
    text-align: center;
}

.foods {  
    margin-left: 27px;
}

.movie,.sport,.sing {
    margin-left: 34px;
}

}


.delicious {
     width: 750px;
    height: 100px;
    //margin-bottom: 52px;
    
    
  .deli-foods {
     width: 195px;
    height: 80px; 
     vertical-align: middle;
    margin-left: 30px;
    margin-bottom: 10px;
}

 .deli-foods img{
     width: 56px;
    height: 50px; 
    vertical-align: middle;
    }
    
 .deli-foods a {
    font-size: 30px;
      color: black;
    }
    
    .more {
    vertical-align: middle;
     width:180px;
    height: 50px; 
    //margin-right: 21px;
    //margin-top: 10px;
    img{
     width: 55px;
    height: 50px; 
    vertical-align: middle;
    }
}  

  .more a {
    font-size:24px;
      color: black;
}

.delicious-photos img{
    width:137px ;
    width: 133px;
}
.delicious-photos img:nth-of-type(1) {
    margin-left: 22px;
}

.delicious-photos img:nth-of-type(2),.delicious-photos img:nth-of-type(3),.delicious-photos img:nth-of-type(4) {
    margin-left:15px;
}


}



/*运动类*/
.sports {
    width: 750px;
    height: 100px;
    margin-top:140px;
    
    .sports-class {
        width: 195px;
        height: 80px; 
        vertical-align: middle;
        margin-left: 30px;
        margin-bottom: 10px;
}

 .sports-class img{
     width:56px;
    height: 50px; 
    vertical-align: middle;
    }

.sports-class a {
    font-size: 30px;
      color: black;
}

.more {
    vertical-align: middle;
     width: 180px;
    height: 50px; 
    
    img{
     width: 55px;
    height: 50px; 
    vertical-align: middle;
    }
}  

.more a {
    font-size: 24px;
      color: black;
    padding-bottom: 10px;
}

.sports-photos img{
    width:137px;
    width: 133px;
}
.sports-photos img:nth-of-type(1) {
    margin-left: 22px;
}

.sports-photos img:nth-of-type(2),.sports-photos img:nth-of-type(3), .sports-photos img:nth-of-type(4){
   margin-left:15px;
}


}

/*电影类和唱歌类*/
.movies {
     width: 750px;
    height: 100px;
    margin-top: 135px;
    
    .movies-class {
        width:195px;
        height: 80px; 
        vertical-align: middle;
        margin-left: 30px;
        margin-bottom: 10px;
}

.movies-class img{
     width: 56px;
    height: 50px; 
    margin-top: 10px;
    vertical-align: middle;
    }
    
   .movies-class a {
         color: black;
    font-size: 30px;
    line-height: 55px;
    margin-left: 19px;
} 
.more {
    vertical-align: middle;
     width: 180px;
    height: 50px; 
    margin-top: 10px;
    
    img{
     width: 55px;
    height: 50px; 
    vertical-align: middle;
    }
    

}

.more a {
      color: black;
    margin-top: 7px;
    font-size: 24px;
}
.movies-photos img{
    width:137px ;
    width: 133px;
}
 .movies-photos img:nth-of-type(1) {
    margin-left: 22px;
}
.movies-photos img:nth-of-type(2),.movies-photos img:nth-of-type(3),.movies-photos img:nth-of-type(4) {
    margin-left: 15px;
}

}

    
}
